<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>
	<title><ui:insert name="pageTitle">Page Title</ui:insert></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<h:outputStylesheet library="css" name="bootstrap.css" />
	<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'/>
	<style>
		body {
			padding-top: 60px;
		}
	</style>
</h:head>

<h:body>
	
	<!--
	Barre de navigation
	-->
	<div class="navbar navbar-inverse navbar-fixed-top" style="background-color: #4BB5AE;">
		<div class="container" style="background-color: #4BB5AE;">

			<div class="navbar-header" style="background-color: #4BB5AE;">
				<a href="../" class="navbar-brand" style="font-family:'Pinyon Script', cursive;font-size : 34px;color:#EFF0F0;font: bold;">Luxury Resort</a>
				
				<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main" style="background-color: #4BB5AE;">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>

			<div class="navbar-collapse collapse" id="navbar-main" style="background-color: #4BB5AE;">
				
				<h:form id="LoginForm" class="navbar-form navbar-right" style="background-color: #4BB5AE;">
					<ul class="nav navbar-nav navbar-right" style="background-color: #4BB5AE;">
<!-- 						<li><h:outputText value="#{loginManagedBean.welcome}" /></li> -->
						<li><h:panelGroup id="PanelConnect1"
								rendered="#{loginManagedBean.connectFieldsShow}">
								<li><h:inputText id="Login" class="form-control col-lg-2"
										placeholder="Login" style="padding-right: 1px;padding-left: 1px;margin-right: 10px;margin-left: 5px;"
										value="#{loginManagedBean.connectionUser}" /></li>
								<li>
								<h:inputSecret id="Password" style="padding-right: 1px;padding-left: 1px;margin-right: 10px;margin-left: 10px;"
										class="form-control col-lg-2" placeholder="Mot de passe"
										value="#{loginManagedBean.connectionPassword}" /></li>
								<li><div class="col-lg-3"><h:commandButton class="btn btn-primary" 
										value="Connexion" action="#{loginManagedBean.connect}" style="background-color: #4BB5AE;font-size : 14px;">
										<f:ajax execute="LoginForm" render="LoginForm"></f:ajax>
									</h:commandButton>
									</div></li>
									<li>
									<a href="../pages/creationCompte.jsf" class="btn btn-primary" style="border : none;text-decoration: underline;padding-top:7px;font-size : 14px;">Créer mon compte</a>
									</li>
							</h:panelGroup></li>
						<li><h:panelGroup id="PanelConnect2"
								rendered="#{loginManagedBean.connectDisconnectShow}">
								<li style="padding-top:10px;"><h:outputText value="#{loginManagedBean.welcome}" style="margin-right: 10px;color: white;font-size : 14px;"/></li>
								<li><h:commandButton class="btn btn-primary"
										value="Déconnexion" action="#{loginManagedBean.disconnect}" style="background-color: #4BB5AE;font-size : 14px;">
									</h:commandButton></li>
								<li>
									<a href="../pages/creationCompte.jsf" class="btn btn-primary" style="border : none;text-decoration: underline;padding-top:7px;background-color: #4BB5AE;font-size : 14px;">Créer mon compte</a>
									</li>
							</h:panelGroup></li>
					</ul>
				</h:form>
			</div>
			
		</div>
	</div>
	
	<div class="container">
		<h1>Sélectionnez votre standing et vos options </h1>
		
		<ui:define name="pageHeader">Réservation</ui:define>

		<h:form id="reservationForm">
	
			<h:panelGroup id="chambresReservationBloc" rendered="true">

				<h:panelGroup id="chambre1ReservationBloc"
					rendered="#{searchEngineManagedBean.chambre1ReservationBloc}">
					<h:panelGrid style="margin-top:10px;">
						<f:facet name="header">
				            <h:outputText style="font-size:16px;" value="Chambre 1"/>
				        </f:facet>
						
						<h:panelGrid columns="2" cellspacing="5">
							<h:outputText value="Capacité : " />
							<h:outputText
								value="#{searchEngineManagedBean.chambre1CapaciteString}" />
							<h:outputLabel for="chambre1Standing" value="Standing : " />
							<h:selectOneMenu id="chambre1Standing"
								value="#{searchEngineManagedBean.chambre1Standing}">
								<f:selectItems value="#{searchEngineManagedBean.allStandingChambre1}" />
							</h:selectOneMenu>
						</h:panelGrid>

						<h:dataTable
							class="table table-striped table-bordered table-hover"
							value="#{searchEngineManagedBean.allOptionForChambre1}"
							var="item">
							<h:column>
								<f:facet name="header">Options disponibles</f:facet>
								#{item.name}
							</h:column>
							<h:column>
								<f:facet name="header">Tarif</f:facet>
								#{item.prix}
							</h:column>
							<h:column>
								<f:facet name="header">Quantité</f:facet>
								<h:selectOneMenu value="#{item.selectedQuantite}">
									<f:selectItems value="#{item.quantite}" />
								</h:selectOneMenu>
							</h:column>
						</h:dataTable>
						
						<h:panelGroup rendered="#{searchEngineManagedBean.displayButton2}">
							<h:commandButton class="btn btn-primary" value="Chambre 2" action="#{searchEngineManagedBean.displayChambre2ReservationBloc}">
								<f:ajax execute="reservationForm" render="chambresReservationBloc" />
							</h:commandButton>
						</h:panelGroup>
						
						<h:panelGroup rendered="#{searchEngineManagedBean.displayValidate1}">
							<h:commandButton class="btn btn-primary" value="Ajouter au panier" action="#{searchEngineManagedBean.addToPanier}" />
						</h:panelGroup>
						
					</h:panelGrid>
				</h:panelGroup>

				<h:panelGroup id="chambre2ReservationBloc"
					rendered="#{searchEngineManagedBean.chambre2ReservationBloc}">
					<h:panelGrid style="margin-top:10px;">
						<f:facet name="header">
				            <h:outputText style="font-size:16px;" value="Chambre 2"/>
				        </f:facet>
				        
						<h:panelGrid columns="2" cellspacing="5">
							<h:outputText value="Capacité : " />
							<h:outputText
								value="#{searchEngineManagedBean.chambre2CapaciteString}" />
							<h:outputLabel for="chambre2Standing" value="Standing : " />
							<h:selectOneMenu id="chambre2Standing"
								value="#{searchEngineManagedBean.chambre2Standing}">
								<f:selectItems value="#{searchEngineManagedBean.allStandingChambre2}" />
							</h:selectOneMenu>
						</h:panelGrid>

						<h:dataTable
							class="table table-striped table-bordered table-hover"
							value="#{searchEngineManagedBean.allOptionForChambre2}"
							var="item">
							<h:column>
								<f:facet name="header">Options disponibles</f:facet>
								#{item.name}
							</h:column>
							<h:column>
								<f:facet name="header">Tarif</f:facet>
								#{item.prix}
							</h:column>
							<h:column>
								<f:facet name="header">Quantité</f:facet>
								<h:selectOneMenu value="#{item.selectedQuantite}">
									<f:selectItems value="#{item.quantite}" />
								</h:selectOneMenu>
							</h:column>
						</h:dataTable>
						
						<h:panelGroup rendered="#{searchEngineManagedBean.displayButton3}">
							<h:commandButton class="btn btn-primary" value="Chambre 3" action="#{searchEngineManagedBean.displayChambre3ReservationBloc}">
								<f:ajax execute="reservationForm" render="chambresReservationBloc" />
							</h:commandButton>
						</h:panelGroup>
						
						<h:panelGroup rendered="#{searchEngineManagedBean.displayValidate2}">
							<h:commandButton class="btn btn-primary" value="Ajouter au panier" action="#{searchEngineManagedBean.addToPanier}" />
						</h:panelGroup>

					</h:panelGrid>
				</h:panelGroup>

				<h:panelGroup id="chambre3ReservationBloc"
					rendered="#{searchEngineManagedBean.chambre3ReservationBloc}">
					<h:panelGrid style="margin-top:10px;">
						<f:facet name="header">
				            <h:outputText style="font-size:16px;" value="Chambre 3"/>
				        </f:facet>

						<h:panelGrid columns="2" cellspacing="5">
							<h:outputText value="Capacité : " />
							<h:outputText
								value="#{searchEngineManagedBean.chambre3CapaciteString}" />
							<h:outputLabel for="chambre3Standing" value="Standing : " />
							<h:selectOneMenu id="chambre3Standing"
								value="#{searchEngineManagedBean.chambre3Standing}">
								<f:selectItems value="#{searchEngineManagedBean.allStandingChambre3}" />
							</h:selectOneMenu>
						</h:panelGrid>

						<h:dataTable
							class="table table-striped table-bordered table-hover"
							value="#{searchEngineManagedBean.allOptionForChambre3}"
							var="item">
							<h:column>
								<f:facet name="header">Options disponibles</f:facet>
								#{item.name}
							</h:column>
							<h:column>
								<f:facet name="header">Tarif</f:facet>
								#{item.prix}
							</h:column>
							<h:column>
								<f:facet name="header">Quantité</f:facet>
								<h:selectOneMenu value="#{item.selectedQuantite}">
									<f:selectItems value="#{item.quantite}" />
								</h:selectOneMenu>
							</h:column>
						</h:dataTable>
						
						<h:panelGroup rendered="true">
							<h:commandButton class="btn btn-primary" value="Ajouter au panier" action="#{searchEngineManagedBean.addToPanier}" />
						</h:panelGroup>

					</h:panelGrid>
				</h:panelGroup>

			</h:panelGroup>

		</h:form>

	</div>
	<h:outputScript library="js" name="bootstrap.min.js" />
</h:body>
</html>